<template>
  <el-dialog
    :title="logPath"
    :close-on-click-modal="false"
    width="1400px"
    :visible.sync="visible">
    <div style="width:100%;height:600px;overflow: auto;border: 1px solid #cccccc;padding:20px;">
      <div v-for="(msg, index) in messages" :label="index" :key="index">
        <div style="font-weight:600;">{{msg}}</div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" @click="goPage(1,false)">首页</el-button>
      <el-button type="primary" @click="goPage(pageIndex-1,false)">上一页</el-button>
      <el-button type="primary" @click="goPage(pageIndex+1,false)">下一页</el-button>
      <el-button type="primary" @click="goPage(0,true)">末页</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import websocket from '../../../utils/websocket.js'
  import Vue from 'vue'
  export default {
    data () {
      return {
        visible: false,
        serverId:"",
        logPath:"",
        messages:[],
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        firstPageButton:true
      }
    },
    methods: {
      init (serverId,logPath) {
        var that=this
        this.serverId=serverId
        this.logPath=logPath
        this.visible = true
        this.goPage(1,false)
      },
      goPage(pageInde,toEnd){
        this.$http({
          url: this.$http.adornUrl('/backend/showLogContent'),
          method: 'post',
          params: this.$http.adornParams({
            'page': pageInde,
            'limit': this.pageSize,
            'serverId':this.serverId,
            'logPath':this.logPath,
            'toEnd':toEnd
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.messages=data.page.list
            this.totalPage = data.page.totalPage
            this.pageIndex=data.page.currPage
            this.pageSize=data.page.pageSize
          } else {
            this.$message.error(data.msg)
          }
        })
      },
    }
  }
</script>
